<template>
	<view class="content">
		<!-- <view class="header"> -->
			<!-- <view class="drop_down">
				<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#1EB481"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
					:extra-active-icon="{name:'arrow-up-fill',color:'#1EB481',size:'26rpx'}" :defaultValue="defaultValue"
					:custom-style="{padding: '0'}" @click="selectMenu">
					<uv-drop-down-item name="haircut" type="2" :label="dropItem('haircut').label"
						:value="dropItem('haircut').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
					@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
			</view>
			<view class="search">
				<view class="icon">
					<image src="https://wx.caobenjiankang.com/image/doctor/search.png" mode="aspectFit"></image>
				</view>
				<input class="uni-input font28" focus placeholder-style="font-size: 28rpx;" @blur="blur" />
				<view class="title font28" @click="getData">
					查询
				</view>
			</view> -->
		<!-- </view> -->

		<view class="box">
			<view class="item" v-for="(item,index) in list" :key="item.user_id" v-if="list.length > 0">
				<view class="left">
					<view class="title font28 font500">
						创建时间:{{$u.timeFormat(item.create_time, 'yyyy-mm-dd hh:MM:ss')}}
					</view>
				</view>
				<view class="k_info">
					<view class="d_info" v-if="item.coach_id != 0">
						<view class="d_name">
							用户:{{item.user.nickName}}
						</view>
						<view class="d_phone">
							联系:{{item.user.phone}}
						</view>
					</view>
					<!-- <view class="d_info" v-if="item.doctor_id != 0">
						<view class="d_name">
							医生:{{item.doctor.coach_name}}
						</view>
						<view class="d_phone">
							联系:{{item.doctor.mobile}}
						</view>
					</view> -->
					<view class="c_status">
						<view class="status font26">
							健康状况
						</view>
						<view class="shop font26">
							{{item.state}}
						</view>
					</view>
				</view>
				<view class="tips">
					<view class="collapse">
						<l-collapse :accordion="true" @click="click">
							<l-collapse-item title="健康方案" titleImg="" :titleImgs="false">
								<view class="contents">
									{{item.suggest}}
									<!-- <textarea @blur="bindTextAreaBlur" v-model="item.suggest" :disabled="true" auto-height placeholder="健康方案" /> -->
									<!-- <view class="btn" @click="submit(item.user_id)">
										提交
									</view> -->
								</view>
							</l-collapse-item>
						</l-collapse>
					</view>
				</view>
			</view>
			<view class="font32 fontw" style="color:#969696;text-align: center;" v-if="list.length == 0">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				defaultValue: [0, 'all', '0'],
				result: [],
				activeName: 'haircut',
				haircut: {
					label: '姓名',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#1EB481',
					child: [{
						label: '全部',
						value: 'quan'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				},
				list: [],
				dList:[],
				info: {
					page: 1,
					pageSize: 10,
					name: ''
				},
				fangan: ''
			};
		},
		onLoad() {
			this.getData()
			this.getDoctor()
		},
		onReachBottom() {
			let p = Number(this.info.page)
			let pS = Number(this.info.pageSize)
			let costr = p * pS
			if (this.list.length < costr) {
				uni.showToast({
					icon: 'error',
					title: '暂无更多',
					duration: 1000
				})
			} else {
				this.info.page = p + 1
				this.getData()
			}
		},
		methods: {
			async submit(id, state) {
				if (state == null) {
					state = ''
				}
				let param = {
					id: id,
					state: state,
					scheme: this.fangan
				}
				const data = await this.$api.doctor.wellness_suggest(param)
				this.getData()
			},
			bindTextAreaBlur: function(e) {
				this.fangan = e.detail.value
			},
			changes(e) {
				console.log(e);
			},
			focus(e) {
				console.log(e, '1');
			},
			async getData() {
				if (this.info.name == '姓名') {
					this.info.name = ''
				}
				const data = await this.$api.doctor.wellness_suggest(this.info)
				this.list = data
				const datass = await this.$api.doctor.doctorHealthState()
				this.list = [...this.list,...datass]
				console.log(this.list,'datass');
			},
			async getDoctor() {
				const data = await this.$api.doctor.doctorList()
				const list = []
				data.map(item => {
					const obj = {
						label: item.nickName,
						value: item.id
					}
					list.push(obj)
				})
				this.haircut.child = list
			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			// click(e) {
			// 	console.log(e);
			// },
			blur(e) {
				console.log(e.detail.value);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value ==
							find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				this.info.name = this.result[0].label
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			display: flex;
			align-items: center;
			padding: 41rpx 32rpx 30rpx 32rpx;
			background-color: #fff;
			margin-bottom: 15rpx;
			position: sticky;
			top: 0;

			.drop_down {
				padding: 21rpx 0 19rpx 26rpx;

				/deep/.uv-sticky {
					border-right: 2rpx solid #ddd;
					padding-right: 24rpx;

					.uv-sticky__content {
						.uv-drop-down {
							border-bottom: unset;

							.uv-drop-down-item {
								padding: unset;
							}
						}
					}
				}
			}

			.search {
				display: flex;
				align-items: center;
				padding: 21rpx 26rpx 21rpx 24rpx;
				flex: 1;

				.icon {
					width: 22rpx;
					height: 24rpx;
					display: flex;
					align-items: center;

					image {
						width: 22rpx;
						height: 24rpx;
					}
				}

				.uni-input {
					padding: 0 8rpx;
					flex: 1;
				}
			}
		}

		.box {
			padding: 30rpx;

			.item {
				padding: 35rpx 23rpx 40rpx 38rpx;
				background-color: #fff;
				margin-bottom: 15rpx;
				border-radius: 16rpx;

				.left {
					justify-content: space-between;
					border-bottom: 2rpx solid #C6C6C6;
					padding-bottom: 26rpx;

					.title {}

					.y {
						display: flex;
						align-items: center;

						.text {
							color: #1EB481;
							margin-right: 8rpx;
						}

						.icon {
							width: 13rpx;
							height: 24rpx;
							display: flex;
							align-items: center;

							image {
								width: 13rpx;
								height: 24rpx;
							}
						}
					}
				}

				.k_info {
					padding: 37rpx 0 38rpx 0;
					border-bottom: 2rpx solid #C6C6C6;
					display: flex;
					align-items: center;
				
					.d_info {
						width: 50%;
						border-right: 2rpx solid #C6C6C6;
				
						.d_name {
							margin-bottom: 16rpx;
						}
				
						.d_phone {}
					}
				
					.c_status {
						padding-left: 57rpx;
						width: 50%;
				
						.status {
							margin-bottom: 16rpx;
						}
				
						.shop {}
					}
				}

				.tips {
					.collapse {
						.contents {
							padding: 20rpx;
							// display: flex;
							// flex-direction: column;
							// align-items: flex-end;

							.btn {
								margin-top: 24rpx;
								width: 120rpx;
								height: 50rpx;
								background-color: #1EB481;
								color: #ffffff;
								text-align: center;
								line-height: 50rpx;
								border-radius: 16rpx;
							}
						}
					}
				}
			}
		}
	}
</style>